<template>
  <div class="home">
    <el-container>
      <el-aside width="230px" class="nav_aside">
        <!-- logo -->
        <div class="logo">
          小龙坎餐饮管理系统
        </div>
        <!-- 导航 -->
        <div class="nav">
          <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#343F50"
            text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item v-for="(v,i) in navList" :key="i" :index="v.path">
              <i :class="v.icon"></i>
              <span>{{v.title}}</span>
            </el-menu-item>
          </el-menu>
        </div>

      </el-aside>
      <el-container>
        <el-header>
          <!-- 用户信息 -->
          <div class="user">
            <span class="el-dropdown-link">
              {{user}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <span>退出</span>
          </div>

          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(v,i) in $route.meta.title" :key="i">{{v}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style="overflow:hidden;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style src="../style/home.css">
</style>
<script>
import navList from "../utils/adminList";
export default {
  data () {
    return {
      navList: navList,
      user: 'test666'
    }
  },
  methods: {

  },
  mounted () {
  },
}
</script>
